
<!-- <uploadimg :image_max="1" @chooseimage="chooseimage" :default_img="img" ></uploadimg> -->

<!-- image_max 最大上传数量 --> <!-- chooseimage 上传成功后获得的图片 --> <!-- default_img 默认图片 -->





<template>
	<view class="evaluate-c-b">
		<view class="goods-img-item" v-for="(item, key) in images">
			<image class="del" src="@/static/my/imgdel.png" mode="" @click="delImage(item,key)"></image>
			<image class="" :src="item" mode="" @click.stop="clickImg(item,key)" mode="aspectFill"></image>
		</view>
		<view class="upload-img" v-if="isImage" @click.stop="upImage">
			<image src="@/static/my/upimg.png" mode="widthFix"></image>
		</view>
	</view>

</template>

<script>
	import upload_image from '@/utils/upload_image.js'
	export default {
		props: {
			image_max: {
				type: Number,
				default: 3,
			},
			default_img: {
				type: String
			}
		},
		data() {
			return {
				images: [], //图片
				count: 0
			}
		},
		watch: {
			default_img: {
				handler(newVal) {
					if (this.default_img) {
						this.images = [this.default_img];
						console.log(this.default_img, '默认图片');
					}
				},
				deep: true,
				immediate: false,
			}
		},
		mounted() {
			this.count = this.image_max;
		},
		computed: {
			isImage() {
				let num = this.image_max - this.images.length;
				console.log(this.images);
				if (num > 0) {
					return true;
				} else {
					return false;
				}
			}
		},
		methods: {
			clickImg(item, index) {
				//预览图片
				// let img = await this.urlBase64(this.img);
				uni.previewImage({
					urls: this.images,
					current: this.images[index]
				});
			},
			delImage(item, index) {
				this.images.splice(index, 1);
				// this.$nextTick(() => {
				// 	this.images=this.images;
				// 	// this.$emit('chooseimage', this.images)
				// })
			},
			urlBase64(url) {
				var toBase64Url;
				return new Promise(function(resolve, reject) {
					uni.request({
						url: url,
						method: 'GET',
						responseType: 'arraybuffer',
						success: async res => {
							let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
							toBase64Url = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
							resolve(toBase64Url)
						}
					});
				})
			},
			upImage() {
				this.count = this.image_max - this.images.length;
				if (this.count == 0) {
					uni.showToast({
						title: '最多上传' + this.image_max + '张',
						icon: 'none'
					})
				} else {
					uni.chooseImage({
						// count:  允许上传的照片数量
						count: this.count,
						// sizeType:  original 原图，compressed 压缩图，默认二者都有
						sizeType: "compressed",
						success: (res) => {
							console.log(res, '111111');
							new upload_image(res.tempFilePaths, {
								complete: (v) => {
									this.setImg(v);
								}
							})
						}
					});
				}
			},
			setImg(v) {
				v.forEach((e) => {
					this.images.push(String(e.img_url.path))
				})
				this.$emit('chooseimage', this.images)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.evaluate-c-b {
		overflow: hidden;
		padding-top: 10rpx;
		padding-bottom: 5rpx;

		.goods-img-item {
			width: 140rpx;
			height: 140rpx;

			margin-top: 10rpx;
			margin-right: 20rpx;
			margin-bottom: 10rpx;
			float: left;
			position: relative;
		}



		.goods-img-item image {
			width: 100%;
			height: 100%;
		}

		.del {
			width: 30rpx !important;
			height: 30rpx !important;
			position: absolute;
			right: -15rpx;
			top: -15rpx;
			z-index: 999;
		}

		.upload-img {
			margin-top: 10rpx;
			width: 140rpx;
			height: 140rpx;
			//margin: 14rpx;
			//text-align: center;
			color: #999999;
			font-size: 22rpx;
			//border: 2rpx dashed #E1E1E1;
			border-radius: 4rpx;
			display: inline-block;
			float: left;

			//padding: 24rpx 0;
			image {
				width: 140rpx;
				height: 140rpx;
			}
		}
	}
</style>
